<template>
  <div id="components-button-demo-button-group">
    <h4>Basic</h4>
    <CloudButtonGroup>
      <CloudButton>Cancel</CloudButton>
      <CloudButton type="primary">
        OK
      </CloudButton>
    </CloudButtonGroup>
    <CloudButtonGroup>
      <CloudButton disabled>
        L
      </CloudButton>
      <CloudButton disabled>
        M
      </CloudButton>
      <CloudButton disabled>
        R
      </CloudButton>
    </CloudButtonGroup>
    <CloudButtonGroup>
      <CloudButton type="primary">
        L
      </CloudButton>
      <CloudButton>M</CloudButton>
      <CloudButton>M</CloudButton>
      <CloudButton type="dashed">
        R
      </CloudButton>
    </CloudButtonGroup>

    <h4>With Icon</h4>
    <CloudButtonGroup>
      <CloudButton type="primary"> <CloudIcon type="left" />Go back </CloudButton>
      <CloudButton type="primary"> Go forward<CloudIcon type="right" /> </CloudButton>
    </CloudButtonGroup>
    <CloudButtonGroup>
      <CloudButton type="primary" icon="cloud" />
      <CloudButton type="primary" icon="cloud-download" />
    </CloudButtonGroup>
  </div>
</template>

<script>
export default {
  title: '6.按钮组合'
}
</script>
<style>
#components-button-demo-button-group > h4 {
  margin: 16px 0;
  font-size: 14px;
  line-height: 1;
  font-weight: normal;
}
#components-button-demo-button-group > h4:first-child {
  margin-top: 0;
}
#components-button-demo-button-group .ant-btn-group {
  margin-right: 8px;
}
</style>